<template>
  <div class="noticeDetails">
    <div class="detailsCon">
      <h2>{{ noticeDetail.title }}</h2>
      <h3>{{ noticeDetail.sub_title }}</h3>
      <div class="artical">
        <img :src="tuImg" alt="" />
        <p v-html="noticeDetail.content"></p>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import apiMar from "@/api/api";
export default {
  components: {},
  data() {
    return {
      noticeDetail: {},
      tuImg: ""
    };
  },
  computed: {},
  watch: {},
  methods: {
    getData() {
      let params = {
        id: this.$route.query.id
      };
      apiMar
        .getNoticeDetail(params)
        .then(res => {
          this.noticeDetail = res;
          this.tuImg = res.sub_image.url;
        })
        .catch(err => {
          // this.$Message.error(err)
        });
    }
  },
  created() {
    this.getData();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.noticeDetails {
  padding-bottom: 100px;
  .detailsCon {
    width: 90%;
    margin: 0 auto;
    > h2 {
      font-size: 24px;
      color: #333;
      font-weight: bold;
      line-height: 1.4;
      margin: 10px 0;
    }
    > h3 {
      font-size: 12px;
      color: #999;
      line-height: 1.4;
    }
    .artical {
      margin-top: 20px;
      img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
      }
      p {
        margin-top: 10px;
        font-size: 12px;
        color: rgba(38, 38, 46, 1);
        line-height: 1.4;
      }
    }
  }
}
</style>
